<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
		<style> html, body, #app { height: 100%; } </style>
	</head>
	<script src="js/axios.min.js"></script>
	<script src="js/vue.min.js"></script>
	<!-- 引入样式 -->
	<link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<body>
		<div id="app" style="display: flex; flex-direction: column; width: 90%; margin:auto; height: calc(100% - 50px)">
				<h4 style="flex: none;display: flex; align-items: center; justify-content: space-between">
					年度月份销量曲线图
					<select style="width: 100px" v-model="year" @change="query">
						<option v-for="item in years">{{item.year}} 年</option>
					</select>
				</h4>
				<div id="container" style="flex:auto"></div>
		</div>
		<script type="text/javascript">


			var v = new Vue({
				el:"#app",
				data: {
					year :"",
					years :[],

				},
				created(){
					axios.get("year.s").then(res=>{
						this.years = res.data;
						this.year = this.years[0].year + "年";
						this.query();
					})
				},
				methods:{
					query(){
						axios.get("qxt.s?year="+this.year.substring(0,4)).then(res=>{
							let months = [];
							let moneys = [];
							res.data.forEach(map=>{
								months.push(map.mon + "月");
								moneys.push(map.money);
							})

							var dom = document.getElementById('container');
							var myChart = echarts.init(dom, null, {
								renderer: 'canvas',
								useDirtyRect: false
							});

							var option = {
								xAxis: {
									type: 'category',
									data:months,
								},
								yAxis: {
									type: 'value'
								},
								series: [{
									data: moneys,
									type: 'line'
								}]
							};
							if (option && typeof option === 'object') {
								myChart.setOption(option);
							}
							window.addEventListener('resize', myChart.resize);

						})
					}
				}
			})


		</script>
	</body>
</html>

<style>
	html,
	body,
	#app {
		height: 100%;
		padding: 0px;
		margin: 0px;
		overflow: hidden;
		color: #333;
	}

	#app {
		/* padding: 50px; */
		box-sizing: border-box;
	}
</style>
